<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>互动大屏 - 电子礼金系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            overflow: hidden;
        }
        
        .gradient-bg-red {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        }
        
        .gradient-bg-blue {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .gradient-bg-purple {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .slide-in-right {
            animation: slideInRight 0.5s ease-out;
        }
        
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .slide-in-left {
            animation: slideInLeft 0.5s ease-out;
        }
        
        @keyframes slideInLeft {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .danmaku {
            position: absolute;
            white-space: nowrap;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            animation: danmakuMove 10s linear infinite;
        }
        
        @keyframes danmakuMove {
            0% { left: 100%; }
            100% { left: -100%; }
        }
        
        .lottery-wheel {
            animation: spin 3s ease-in-out;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(1800deg); }
        }
        
        .photo-frame {
            border: 8px solid #fff;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
            border-radius: 10px;
        }
        
        .ranking-item {
            transition: all 0.3s ease;
        }
        
        .ranking-item:hover {
            transform: scale(1.02);
        }
        
        .progress-bar {
            background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
            background-size: 400% 400%;
            animation: gradientShift 3s ease infinite;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    </style>
</head>
<body class="gradient-bg-red">
    <!-- 全屏容器 -->
    <div id="screen-container" class="h-screen w-screen relative overflow-hidden">
        
        <!-- 顶部活动信息 -->
        <div class="absolute top-0 left-0 right-0 z-20 bg-black bg-opacity-30 text-white p-6">
            <div class="flex justify-between items-center">
                <div class="text-center flex-1">
                    <h1 id="event-title" class="text-4xl font-bold mb-2 floating">张三 & 李四 婚礼庆典</h1>
                    <p id="event-date" class="text-xl">2024年1月20日 星期六</p>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold" id="current-time"></div>
                    <div class="text-lg" id="current-date"></div>
                </div>
            </div>
        </div>

        <!-- 核心数据展示区 -->
        <div class="absolute top-32 left-8 right-8 z-10">
            <div class="grid grid-cols-3 gap-8 mb-8">
                <!-- 已收总额 -->
                <div class="bg-white bg-opacity-90 rounded-2xl p-6 text-center bounce-in">
                    <div class="text-3xl mb-2">💰</div>
                    <div class="text-gray-600 text-lg mb-2">已收总额</div>
                    <div id="total-amount" class="text-5xl font-bold text-red-600 pulse">¥0</div>
                </div>
                
                <!-- 参与人数 -->
                <div class="bg-white bg-opacity-90 rounded-2xl p-6 text-center bounce-in">
                    <div class="text-3xl mb-2">👥</div>
                    <div class="text-gray-600 text-lg mb-2">参与人数</div>
                    <div id="total-count" class="text-5xl font-bold text-blue-600 pulse">0</div>
                </div>
                
                <!-- 今日新增 -->
                <div class="bg-white bg-opacity-90 rounded-2xl p-6 text-center bounce-in">
                    <div class="text-3xl mb-2">📈</div>
                    <div class="text-gray-600 text-lg mb-2">今日新增</div>
                    <div id="today-count" class="text-5xl font-bold text-green-600 pulse">0</div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="absolute top-80 left-8 right-8 bottom-8 grid grid-cols-3 gap-6">
            
            <!-- 左侧：礼金排行榜 -->
            <div class="bg-white bg-opacity-90 rounded-2xl p-6 slide-in-left">
                <div class="flex items-center mb-6">
                    <div class="text-3xl mr-3">🏆</div>
                    <h2 class="text-2xl font-bold text-gray-800">礼金排行榜</h2>
                </div>
                
                <div id="ranking-list" class="space-y-3 max-h-96 overflow-y-auto">
                    <div class="text-center text-gray-500 py-8">
                        <div class="text-4xl mb-2">📝</div>
                        <p>等待礼金录入...</p>
                    </div>
                </div>
            </div>

            <!-- 中间：多媒体展示区 -->
            <div class="bg-white bg-opacity-90 rounded-2xl p-6 slide-in-left">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <div class="text-3xl mr-3">🎬</div>
                        <h2 class="text-2xl font-bold text-gray-800">精彩瞬间</h2>
                    </div>
                    <div class="flex space-x-2">
                        <button id="media-prev" class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300 transition duration-200">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </button>
                        <button id="media-play-pause" class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center hover:bg-red-700 transition duration-200">
                            <svg id="play-icon" class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                            <svg id="pause-icon" class="w-4 h-4 text-white hidden" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                            </svg>
                        </button>
                        <button id="media-next" class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300 transition duration-200">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- 多媒体播放区域 -->
                <div id="media-container" class="relative bg-black rounded-xl overflow-hidden mb-4" style="height: 300px;">
                    <!-- 视频播放器 -->
                    <video id="media-video" class="w-full h-full object-cover hidden" controls>
                        您的浏览器不支持视频播放
                    </video>
                    
                    <!-- 图片展示 -->
                    <img id="media-image" class="w-full h-full object-cover hidden" alt="图片展示">
                    
                    <!-- 音频播放器 -->
                    <div id="media-audio" class="hidden w-full h-full flex items-center justify-center bg-gradient-to-br from-purple-500 to-pink-500">
                        <div class="text-center text-white">
                            <div class="text-6xl mb-4">🎵</div>
                            <div id="audio-title" class="text-xl font-bold mb-2">音乐播放中</div>
                            <div class="flex items-center justify-center space-x-4">
                                <button id="audio-prev" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition duration-200">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                    </svg>
                                </button>
                                <button id="audio-play-pause" class="w-12 h-12 bg-white bg-opacity-30 rounded-full flex items-center justify-center hover:bg-opacity-40 transition duration-200">
                                    <svg id="audio-play-icon" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M8 5v14l11-7z"/>
                                    </svg>
                                    <svg id="audio-pause-icon" class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                                    </svg>
                                </button>
                                <button id="audio-next" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition duration-200">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 默认状态 -->
                    <div id="media-default" class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-500">
                        <div class="text-center text-white">
                            <div class="text-6xl mb-4">📸</div>
                            <div class="text-xl font-bold">等待多媒体内容</div>
                            <div class="text-sm opacity-80 mt-2">上传视频、图片或音乐开始播放</div>
                        </div>
                    </div>
                </div>
                
                <!-- 媒体列表 -->
                <div id="media-list" class="space-y-2 max-h-32 overflow-y-auto">
                    <!-- 媒体项目将通过JavaScript动态添加 -->
                </div>
            </div>

            <!-- 右侧：祝福墙 -->
            <div class="bg-white bg-opacity-90 rounded-2xl p-6 slide-in-right">
                <div class="flex items-center mb-6">
                    <div class="text-3xl mr-3">💝</div>
                    <h2 class="text-2xl font-bold text-gray-800">祝福墙</h2>
                </div>
                
                <div id="blessings-wall" class="h-96 overflow-hidden relative">
                    <div class="text-center text-gray-500 py-8">
                        <div class="text-4xl mb-2">💌</div>
                        <p>等待祝福消息...</p>
                    </div>
                </div>
                
                <!-- 祝福输入区域 -->
                <div class="mt-4 flex space-x-3">
                    <input type="text" id="blessing-input" placeholder="输入您的祝福..." 
                           class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent">
                    <button id="send-blessing" class="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition duration-200">
                        发送
                    </button>
                </div>
            </div>
        </div>

        <!-- 底部功能区域 -->
        <div class="absolute bottom-8 left-8 right-8 z-10">
            <div class="grid grid-cols-3 gap-8">
                
                <!-- 签到打卡 -->
                <div class="bg-white bg-opacity-90 rounded-2xl p-6">
                    <div class="flex items-center mb-4">
                        <div class="text-2xl mr-3">📸</div>
                        <h3 class="text-xl font-bold text-gray-800">签到打卡</h3>
                    </div>
                    
                    <div id="checkin-photos" class="grid grid-cols-3 gap-2 max-h-32 overflow-hidden">
                        <!-- 签到照片将通过JavaScript动态添加 -->
                    </div>
                    
                    <div class="mt-4 text-center">
                        <div class="text-sm text-gray-600 mb-2">扫码签到</div>
                        <div class="w-16 h-16 bg-gray-200 rounded-lg mx-auto flex items-center justify-center">
                            <div class="text-2xl">📱</div>
                        </div>
                    </div>
                </div>

                <!-- 活动进度 -->
                <div class="bg-white bg-opacity-90 rounded-2xl p-6">
                    <div class="flex items-center mb-4">
                        <div class="text-2xl mr-3">⏰</div>
                        <h3 class="text-xl font-bold text-gray-800">活动进度</h3>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">迎宾</span>
                            <div class="w-24 h-2 bg-gray-200 rounded-full">
                                <div class="w-full h-2 bg-green-500 rounded-full"></div>
                            </div>
                            <span class="text-xs text-green-600">已完成</span>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">典礼</span>
                            <div class="w-24 h-2 bg-gray-200 rounded-full">
                                <div class="w-3/4 h-2 bg-yellow-500 rounded-full"></div>
                            </div>
                            <span class="text-xs text-yellow-600">进行中</span>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">宴席</span>
                            <div class="w-24 h-2 bg-gray-200 rounded-full">
                                <div class="w-0 h-2 bg-gray-400 rounded-full"></div>
                            </div>
                            <span class="text-xs text-gray-600">待开始</span>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">送客</span>
                            <div class="w-24 h-2 bg-gray-200 rounded-full">
                                <div class="w-0 h-2 bg-gray-400 rounded-full"></div>
                            </div>
                            <span class="text-xs text-gray-600">待开始</span>
                        </div>
                    </div>
                </div>

                <!-- 互动抽奖 -->
                <div class="bg-white bg-opacity-90 rounded-2xl p-6">
                    <div class="flex items-center mb-4">
                        <div class="text-2xl mr-3">🎲</div>
                        <h3 class="text-xl font-bold text-gray-800">互动抽奖</h3>
                    </div>
                    
                    <div id="lottery-display" class="text-center py-8">
                        <div class="text-4xl mb-4">🎁</div>
                        <div id="lottery-result" class="text-xl font-bold text-gray-600 mb-4">等待抽奖</div>
                        <button id="start-lottery" class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-200">
                            开始抽奖
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹幕容器 -->
        <div id="danmaku-container" class="absolute inset-0 pointer-events-none z-5"></div>

        <!-- 背景装饰 -->
        <div class="absolute inset-0 z-0">
            <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-white bg-opacity-10 rounded-full floating"></div>
            <div class="absolute top-3/4 right-1/4 w-24 h-24 bg-white bg-opacity-10 rounded-full floating" style="animation-delay: 1s;"></div>
            <div class="absolute top-1/2 right-1/3 w-16 h-16 bg-white bg-opacity-10 rounded-full floating" style="animation-delay: 2s;"></div>
        </div>

        <!-- 主题切换按钮 -->
        <div class="absolute top-4 right-4 z-30">
            <div class="flex space-x-2">
                <button class="theme-btn w-8 h-8 bg-red-500 rounded-full border-2 border-white" data-theme="red"></button>
                <button class="theme-btn w-8 h-8 bg-blue-500 rounded-full border-2 border-white" data-theme="blue"></button>
                <button class="theme-btn w-8 h-8 bg-purple-500 rounded-full border-2 border-white" data-theme="purple"></button>
            </div>
        </div>
    </div>

    <!-- 抽奖动画模态框 -->
    <div id="lottery-modal" class="hidden fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
        <div class="bg-white rounded-3xl p-8 text-center max-w-md mx-4">
            <div class="text-6xl mb-6">🎉</div>
            <h2 class="text-3xl font-bold text-gray-800 mb-4">恭喜中奖！</h2>
            <div id="winner-name" class="text-2xl font-bold text-red-600 mb-6"></div>
            <button id="close-lottery-modal" class="px-8 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition duration-200">
                确定
            </button>
        </div>
    </div>

    <script>
        // 全局变量
        let socket = null;
        let currentEvent = null;
        let gifts = [];
        let blessings = [];
        let mediaList = [];
        let currentMediaIndex = 0;
        let isLotteryRunning = false;
        let isMediaPlaying = false;
        let mediaPlayMode = 'auto'; // 'auto', 'manual'

        // 工具函数
        function formatCurrency(amount) {
            return '¥' + parseFloat(amount).toFixed(2);
        }

        function formatTime(date) {
            return date.toLocaleTimeString('zh-CN', { 
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit' 
            });
        }

        function formatDate(date) {
            return date.toLocaleDateString('zh-CN', { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                weekday: 'long'
            });
        }

        // Socket连接
        function connectSocket() {
            socket = io();
            
            socket.on('connect', () => {
                console.log('Socket连接成功');
                // 加入当前活动房间
                if (currentEvent) {
                    socket.emit('join_event', currentEvent.id);
                }
            });
            
            socket.on('gift_added', (data) => {
                if (data.event_id === currentEvent?.id) {
                    addGiftToList(data.gift);
                    updateStats();
                }
            });
            
            socket.on('blessing_added', (data) => {
                if (data.event_id === currentEvent?.id) {
                    addBlessingToList(data.blessing);
                }
            });
        }

        // 更新统计数据
        function updateStats() {
            const totalAmount = gifts.reduce((sum, gift) => sum + gift.amount, 0);
            const totalCount = gifts.length;
            const today = new Date().toDateString();
            const todayCount = gifts.filter(gift => 
                new Date(gift.created_at).toDateString() === today
            ).length;
            
            document.getElementById('total-amount').textContent = formatCurrency(totalAmount);
            document.getElementById('total-count').textContent = totalCount;
            document.getElementById('today-count').textContent = todayCount;
            
            // 添加动画效果
            document.getElementById('total-amount').classList.add('pulse');
            setTimeout(() => {
                document.getElementById('total-amount').classList.remove('pulse');
            }, 1000);
        }

        // 更新排行榜
        function updateRanking() {
            const container = document.getElementById('ranking-list');
            
            if (gifts.length === 0) {
                container.innerHTML = `
                    <div class="text-center text-gray-500 py-8">
                        <div class="text-4xl mb-2">📝</div>
                        <p>等待礼金录入...</p>
                    </div>
                `;
                return;
            }
            
            const sortedGifts = gifts.slice().sort((a, b) => b.amount - a.amount).slice(0, 10);
            
            container.innerHTML = sortedGifts.map((gift, index) => {
                const rankClass = index < 3 ? 'bg-gradient-to-r from-yellow-400 to-yellow-600' : 'bg-gray-100';
                const rankIcon = index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : '🏅';
                
                return `
                    <div class="ranking-item flex items-center p-3 ${rankClass} rounded-lg">
                        <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center mr-3 font-bold">
                            ${rankIcon}
                        </div>
                        <div class="flex-1">
                            <div class="font-bold text-gray-800">${gift.name}</div>
                            <div class="text-sm text-gray-600">${gift.payment_method}</div>
                        </div>
                        <div class="text-lg font-bold text-red-600">${formatCurrency(gift.amount)}</div>
                    </div>
                `;
            }).join('');
        }

        // 添加礼金到列表
        function addGiftToList(gift) {
            gifts.push(gift);
            updateRanking();
            
            // 显示弹幕
            showDanmaku(`${gift.name} 贺礼 ${formatCurrency(gift.amount)}`);
        }

        // 更新祝福墙
        function updateBlessingsWall() {
            const container = document.getElementById('blessings-wall');
            
            if (blessings.length === 0) {
                container.innerHTML = `
                    <div class="text-center text-gray-500 py-8">
                        <div class="text-4xl mb-2">💌</div>
                        <p>等待祝福消息...</p>
                    </div>
                `;
                return;
            }
            
            // 只显示最新的10条祝福
            const recentBlessings = blessings.slice(-10).reverse();
            
            container.innerHTML = recentBlessings.map(blessing => `
                <div class="blessing-item bg-gradient-to-r from-pink-100 to-purple-100 rounded-lg p-4 mb-3 slide-in-right">
                    <div class="flex items-center justify-between mb-2">
                        <span class="font-bold text-gray-800">${blessing.name}</span>
                        <span class="text-sm text-gray-500">${new Date(blessing.created_at).toLocaleTimeString()}</span>
                    </div>
                    <div class="text-gray-700">${blessing.content}</div>
                </div>
            `).join('');
        }

        // 添加祝福到列表
        function addBlessingToList(blessing) {
            blessings.push(blessing);
            updateBlessingsWall();
            
            // 显示弹幕
            showDanmaku(`${blessing.name}: ${blessing.content}`);
        }

        // 显示弹幕
        function showDanmaku(text) {
            const container = document.getElementById('danmaku-container');
            const danmaku = document.createElement('div');
            
            danmaku.className = 'danmaku text-white text-xl';
            danmaku.textContent = text;
            danmaku.style.top = Math.random() * 80 + 10 + '%';
            danmaku.style.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
            
            container.appendChild(danmaku);
            
            // 10秒后移除弹幕
            setTimeout(() => {
                if (danmaku.parentNode) {
                    danmaku.parentNode.removeChild(danmaku);
                }
            }, 10000);
        }

        // 抽奖功能
        function startLottery() {
            if (isLotteryRunning || gifts.length === 0) return;
            
            isLotteryRunning = true;
            const button = document.getElementById('start-lottery');
            button.textContent = '抽奖中...';
            button.disabled = true;
            
            // 模拟抽奖过程
            const participants = Array.from(new Set(gifts.map(gift => gift.name)));
            let currentIndex = 0;
            
            const lotteryInterval = setInterval(() => {
                const randomName = participants[Math.floor(Math.random() * participants.length)];
                document.getElementById('lottery-result').textContent = randomName;
            }, 100);
            
            // 3秒后停止抽奖
            setTimeout(() => {
                clearInterval(lotteryInterval);
                
                const winner = participants[Math.floor(Math.random() * participants.length)];
                document.getElementById('lottery-result').textContent = winner;
                
                // 显示中奖模态框
                document.getElementById('winner-name').textContent = winner;
                document.getElementById('lottery-modal').classList.remove('hidden');
                
                // 重置按钮
                button.textContent = '开始抽奖';
                button.disabled = false;
                isLotteryRunning = false;
                
                // 显示弹幕
                showDanmaku(`🎉 恭喜 ${winner} 中奖！`);
            }, 3000);
        }

        // 主题切换
        function changeTheme(theme) {
            const container = document.getElementById('screen-container');
            container.className = container.className.replace(/gradient-bg-\w+/, `gradient-bg-${theme}`);
            
            // 保存主题偏好
            localStorage.setItem('screen-theme', theme);
        }

        // 更新时间
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = formatTime(now);
            document.getElementById('current-date').textContent = formatDate(now);
        }

        // 模拟签到照片
        function addCheckinPhoto() {
            const container = document.getElementById('checkin-photos');
            const photos = ['👨', '👩', '👶', '👴', '👵', '👨‍💼', '👩‍💼', '👨‍🎓', '👩‍🎓'];
            
            if (container.children.length < 9) {
                const photo = document.createElement('div');
                photo.className = 'w-8 h-8 bg-gray-200 rounded-lg flex items-center justify-center text-lg';
                photo.textContent = photos[Math.floor(Math.random() * photos.length)];
                container.appendChild(photo);
            }
        }

        // 加载活动数据
        async function loadEventData() {
            try {
                // 这里应该从URL参数或API获取活动ID
                const eventId = new URLSearchParams(window.location.search).get('event') || 'demo-event';
                
                // 模拟活动数据
                currentEvent = {
                    id: eventId,
                    title: '张三 & 李四 婚礼庆典',
                    event_date: '2024-01-20'
                };
                
                document.getElementById('event-title').textContent = currentEvent.title;
                document.getElementById('event-date').textContent = formatDate(new Date(currentEvent.event_date));
                
                // 模拟礼金数据
                gifts = [
                    { name: '王五', amount: 500, payment_method: '微信', created_at: new Date().toISOString() },
                    { name: '赵六', amount: 300, payment_method: '现金', created_at: new Date().toISOString() },
                    { name: '孙七', amount: 800, payment_method: '支付宝', created_at: new Date().toISOString() }
                ];
                
                // 模拟祝福数据
                blessings = [
                    { name: '王五', content: '祝新人百年好合！', created_at: new Date().toISOString() },
                    { name: '赵六', content: '早生贵子，幸福美满！', created_at: new Date().toISOString() }
                ];
                
                updateStats();
                updateRanking();
                updateBlessingsWall();
                loadMediaList();
                
                // 定期添加签到照片
                setInterval(addCheckinPhoto, 5000);
                
                // 启动自动播放
                setTimeout(startAutoPlay, 1000);
                
            } catch (error) {
                console.error('加载活动数据失败:', error);
            }
        }

        // 发送祝福
        async function sendBlessing() {
            const input = document.getElementById('blessing-input');
            const content = input.value.trim();
            
            if (!content) return;
            
            const name = prompt('请输入您的姓名：') || '匿名';
            
            try {
                // 这里应该调用API发送祝福
                const blessing = {
                    name: name,
                    content: content,
                    created_at: new Date().toISOString()
                };
                
                addBlessingToList(blessing);
                input.value = '';
                
            } catch (error) {
                console.error('发送祝福失败:', error);
            }
        }

        // 多媒体管理
        async function loadMediaList() {
            if (!currentEvent) return;
            
            try {
                const response = await fetch(`/api/media/${currentEvent.id}`);
                const media = await response.json();
                mediaList = media;
                renderMediaList();
                
                if (mediaList.length > 0) {
                    playMedia(0);
                }
            } catch (error) {
                console.error('加载多媒体列表失败:', error);
            }
        }

        function renderMediaList() {
            const container = document.getElementById('media-list');
            
            if (mediaList.length === 0) {
                container.innerHTML = '<div class="text-center text-gray-500 py-4">暂无多媒体内容</div>';
                return;
            }

            container.innerHTML = mediaList.map((media, index) => `
                <div class="media-item flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-100 transition duration-200 ${index === currentMediaIndex ? 'bg-red-100 border border-red-300' : ''}" 
                     onclick="playMedia(${index})">
                    <div class="w-8 h-8 rounded-lg overflow-hidden mr-3">
                        ${media.type === 'video' ? 
                            `<div class="w-full h-full bg-red-500 flex items-center justify-center text-white text-xs">📹</div>` :
                          media.type === 'image' ? 
                            `<img src="${media.file_path}" class="w-full h-full object-cover" alt="${media.title}">` :
                            `<div class="w-full h-full bg-purple-500 flex items-center justify-center text-white text-xs">🎵</div>`
                        }
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-gray-800 truncate">${media.title}</div>
                        <div class="text-xs text-gray-500">${media.type === 'video' ? '视频' : media.type === 'image' ? '图片' : '音频'}</div>
                    </div>
                </div>
            `).join('');
        }

        function playMedia(index) {
            if (index < 0 || index >= mediaList.length) return;
            
            currentMediaIndex = index;
            const media = mediaList[index];
            
            // 隐藏所有媒体元素
            document.getElementById('media-video').classList.add('hidden');
            document.getElementById('media-image').classList.add('hidden');
            document.getElementById('media-audio').classList.add('hidden');
            document.getElementById('media-default').classList.add('hidden');
            
            if (media.type === 'video') {
                const video = document.getElementById('media-video');
                video.src = media.file_path;
                video.classList.remove('hidden');
                video.play();
                isMediaPlaying = true;
                updatePlayPauseButton();
            } else if (media.type === 'image') {
                const img = document.getElementById('media-image');
                img.src = media.file_path;
                img.classList.remove('hidden');
                isMediaPlaying = false;
                updatePlayPauseButton();
            } else if (media.type === 'audio') {
                const audioDiv = document.getElementById('media-audio');
                document.getElementById('audio-title').textContent = media.title;
                audioDiv.classList.remove('hidden');
                
                // 创建隐藏的audio元素
                let audio = document.getElementById('hidden-audio');
                if (!audio) {
                    audio = document.createElement('audio');
                    audio.id = 'hidden-audio';
                    audio.preload = 'auto';
                    document.body.appendChild(audio);
                }
                audio.src = media.file_path;
                audio.play();
                isMediaPlaying = true;
                updatePlayPauseButton();
            }
            
            renderMediaList();
        }

        function playNextMedia() {
            const nextIndex = (currentMediaIndex + 1) % mediaList.length;
            playMedia(nextIndex);
        }

        function playPrevMedia() {
            const prevIndex = currentMediaIndex === 0 ? mediaList.length - 1 : currentMediaIndex - 1;
            playMedia(prevIndex);
        }

        function toggleMediaPlayPause() {
            const media = mediaList[currentMediaIndex];
            if (!media) return;
            
            if (media.type === 'video') {
                const video = document.getElementById('media-video');
                if (isMediaPlaying) {
                    video.pause();
                } else {
                    video.play();
                }
            } else if (media.type === 'audio') {
                const audio = document.getElementById('hidden-audio');
                if (isMediaPlaying) {
                    audio.pause();
                } else {
                    audio.play();
                }
            }
            
            isMediaPlaying = !isMediaPlaying;
            updatePlayPauseButton();
        }

        function updatePlayPauseButton() {
            const playIcon = document.getElementById('play-icon');
            const pauseIcon = document.getElementById('pause-icon');
            const audioPlayIcon = document.getElementById('audio-play-icon');
            const audioPauseIcon = document.getElementById('audio-pause-icon');
            
            if (isMediaPlaying) {
                playIcon.classList.add('hidden');
                pauseIcon.classList.remove('hidden');
                audioPlayIcon.classList.add('hidden');
                audioPauseIcon.classList.remove('hidden');
            } else {
                playIcon.classList.remove('hidden');
                pauseIcon.classList.add('hidden');
                audioPlayIcon.classList.remove('hidden');
                audioPauseIcon.classList.add('hidden');
            }
        }

        // 自动播放模式
        function startAutoPlay() {
            if (mediaPlayMode !== 'auto' || mediaList.length === 0) return;
            
            const media = mediaList[currentMediaIndex];
            if (media && media.type === 'image') {
                // 图片显示5秒后自动切换
                setTimeout(() => {
                    if (mediaPlayMode === 'auto') {
                        playNextMedia();
                    }
                }, 5000);
            }
        }

        // 事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化
            connectSocket();
            loadEventData();
            updateTime();
            
            // 每秒更新时间
            setInterval(updateTime, 1000);
            
            // 主题切换按钮
            document.querySelectorAll('.theme-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const theme = this.getAttribute('data-theme');
                    changeTheme(theme);
                });
            });
            
            // 抽奖按钮
            document.getElementById('start-lottery').addEventListener('click', startLottery);
            
            // 发送祝福按钮
            document.getElementById('send-blessing').addEventListener('click', sendBlessing);
            
            // 祝福输入框回车发送
            document.getElementById('blessing-input').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendBlessing();
                }
            });
            
            // 多媒体控制按钮
            document.getElementById('media-prev').addEventListener('click', playPrevMedia);
            document.getElementById('media-next').addEventListener('click', playNextMedia);
            document.getElementById('media-play-pause').addEventListener('click', toggleMediaPlayPause);
            
            // 音频控制按钮
            document.getElementById('audio-prev').addEventListener('click', playPrevMedia);
            document.getElementById('audio-next').addEventListener('click', playNextMedia);
            document.getElementById('audio-play-pause').addEventListener('click', toggleMediaPlayPause);
            
            // 视频播放事件
            document.getElementById('media-video').addEventListener('ended', playNextMedia);
            document.getElementById('media-video').addEventListener('play', function() {
                isMediaPlaying = true;
                updatePlayPauseButton();
            });
            document.getElementById('media-video').addEventListener('pause', function() {
                isMediaPlaying = false;
                updatePlayPauseButton();
            });
            
            // 音频播放事件
            const audio = document.getElementById('hidden-audio');
            if (audio) {
                audio.addEventListener('ended', playNextMedia);
                audio.addEventListener('play', function() {
                    isMediaPlaying = true;
                    updatePlayPauseButton();
                });
                audio.addEventListener('pause', function() {
                    isMediaPlaying = false;
                    updatePlayPauseButton();
                });
            }
            
            // 关闭抽奖模态框
            document.getElementById('close-lottery-modal').addEventListener('click', function() {
                document.getElementById('lottery-modal').classList.add('hidden');
            });
            
            // 加载保存的主题
            const savedTheme = localStorage.getItem('screen-theme') || 'red';
            changeTheme(savedTheme);
        });
    </script>
</body>
</html>
